<template>
    <div class="layout-container">
        <!-- 固定头部区域 -->
        <div class="fixed-header">
            <!-- 头部显示试卷名称和按钮 -->
            <grading-paper-header :paper-name="paper?.paper?.name" :tab-name="tabName" :active="active" @on-statistics="onStatistics" @on-back="onBack" />
        </div>

        <!-- 可滚动内容区域 -->
        <div class="scroll-content">
            <!-- 试卷描述，当状态为已阅卷时，才会显示用户得分 -->
            <paper-description :paper="paperInfo" :paper-score="userScore" />

            <!-- 数据表格 -->
            <div v-if="active === 'table'" class="animate__animated" :class="tableAnimateClass">
                <grading-paper-table :answers="answers" @on-show="onShow" />
            </div>

            <!-- 试卷题目列表 -->
            <div v-if="active === 'questions'" class="animate__animated" :class="questionAnimateClass">
                <grading-paper-question-list :paper-question-list="paperQuestionList" />
            </div>

            <!-- 试卷统计信息 -->
            <div v-if="active === 'statistics'" class="animate__animated" :class="statisticsAnimateClass">
                <grading-paper-statistics :statistics="statistics" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject } from "vue";
import { delay } from "@/utils/common";
import GradingPaperHeader from "@/views/system/components/gradingPaper/GradingPaperHeader.vue";
import PaperDescription from "@/views/system/components/paper/PaperDescription.vue";
import GradingPaperTable from "@/views/system/components/gradingPaper/GradingPaperTable.vue";
import GradingPaperQuestionList from "@/views/system/components/gradingPaper/GradingPaperQuestionList.vue";
import GradingPaperStatistics from "@/views/system/components/gradingPaper/GradingPaperStatistics.vue";

//获取自定义全局方法
const { emitter, http } = inject<any>("method");

//父传子
interface Props {
    paper?: Record<string, any>;
    tabName?: string | null;
}
const props = withDefaults(defineProps<Props>(), {
    paper: () => ({}),
    tabName: null,
});

//试卷答题者
const answers = ref<any[]>(props.paper.answers);

//试卷信息
const paperInfo = ref<Record<string, any>>(props.paper.paper);

//用户得分
const userScore = ref<number | null>(null);
emitter.on("grading-paper-total-score", (score: number) => {
    userScore.value = score;
});

//试卷题目列表信息
const paperQuestionList = ref<Record<string, any>>({});

//当前活动的元素
const active = ref<string>("table");

//class样式
const tableAnimateClass = ref<string>("");
const questionAnimateClass = ref<string>("");
const statisticsAnimateClass = ref<string>("");

//统计信息
const statistics = ref<Record<string, any>>({});

//统计按钮点击事件
const onStatistics = async () => {
    const data = await http.get(`/gradingPaper/statistics/${paperInfo.value.id}`);
    if (data) {
        tableAnimateClass.value = "animate__zoomOut";
        await delay(500);
        tableAnimateClass.value = "";
        active.value = "statistics";
        statistics.value = data;
        paperInfo.value = data.paper;
        userScore.value = null;
        statisticsAnimateClass.value = "animate__zoomIn";
        await delay(1000);
        statisticsAnimateClass.value = "";
    }
};

//展示试卷详情（是否阅卷）
const onShow = async (id: string) => {
    const data = await http.get(`/gradingPaper/grading`, { paperId: paperInfo.value.id, answerId: id });
    if (data) {
        tableAnimateClass.value = "animate__zoomOut";
        await delay(500);
        tableAnimateClass.value = "";
        active.value = "questions";
        questionAnimateClass.value = "animate__zoomIn";
        paperInfo.value = data.paper;
        userScore.value = data.userScore;
        paperQuestionList.value = data;
        await delay(1000);
        questionAnimateClass.value = "";
    }
};

//使用defineEmits注册一个自定义事件
const emit = defineEmits(["on-back"]);

//返回
const onBack = () => emit("on-back");

//点击close触发函数
emitter.on("grading-paper-table-close", async () => {
    userScore.value = null;
    const data = await http.get(`/gradingPaper/getGradingPaper/${paperInfo.value.id}`);
    if (data) {
        questionAnimateClass.value = "animate__zoomOut";
        statisticsAnimateClass.value = "animate__zoomOut";
        await delay(500);
        questionAnimateClass.value = "";
        statisticsAnimateClass.value = "";
        active.value = "table";
        answers.value = data?.answers || [];
        tableAnimateClass.value = "animate__zoomIn";
        await delay(1000);
        tableAnimateClass.value = "";
    }
});
</script>

<style scoped lang="less">
.layout-container {
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    .fixed-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        padding: 0 16px;
        flex-shrink: 0;
    }
    .scroll-content {
        flex: 1;
        overflow-y: auto;
        padding-top: 10px;
    }
}
</style>
